<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .big{
            width: 500px;
            height: 1150px;
            /* border: 1px solid red; */
            margin: auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
            background-color: #f4f4f4;
        }
        .counts{
            width: 240px;
            height: 280px;
            /* border: 1px solid red; */
            text-align: center;
            border-radius: 10px;
            background-color: white;
            transition: all .2s linear;
        }
        .counts:hover {
            box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
            transform: translate3d(0,-2px,0);
        }
        .counts img{
            width: 160px;
            height: 160px;
        }
        .counts p:nth-of-type(1){
            font-size: 14px;
            font-weight: 700;
            color: #333;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .counts p:nth-of-type(2){
            font-size: 12px;
            font-weight: 400;
            color: #b0b0b0;
            margin: 20px 10px 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .counts span {
            font-size: 12px;
            font-weight: 700;
            color: rgb(255, 77, 0);
        }
        h1{
            text-align: center;
            color: aqua;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <h1>{{ fathername }}</h1>
        <my-cpn :sonname="fathername" @addname="changeName"></my-cpn>
    </div>



    <script src="./img/vue.js"></script>
    <template id="mycpn">
        <ul class="big">
            <li v-for="(item,index) in list" class="counts" :key="index" @click="getData(index)">
                <img :src="item.imgsrc" alt="">
                <p>{{item.name}}</p>
                <p>{{item.introduce}}</p>
                <span>{{item.num}}</span>
            </li>
        </ul>
    </template>
    <script>

        const app = new Vue({
            el:'#app',
            data(){
                return{
                    fathername:'',
                }
            },
            methods:{
                changeName(val){
                    this.fathername = val;
                }
            }
            ,
            components:{
                'my-cpn':{
                    template:'#mycpn',
                    data(){
                        return{
                            list:[
                        {
                            imgsrc:'./img/1.webp',
                            name:'Xiaomi Civi 1S',
                            introduce:'原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus',
                            num:'2299元起',
                        },
                        {
                            imgsrc:'./img/2.webp',
                            name:'Redmi Note 11SE',
                            introduce:'双卡双5G｜疾速登陆',
                            num:'1099元起',
                        },
                        {
                            imgsrc:'./img/3.webp',
                            name:'Redmi K40S',
                            introduce:'口碑真旗舰',
                            num:'1799元起',
                        },
                        {
                            imgsrc:'./img/4.webp',
                            name:'小米电视 ES55 2022款',
                            introduce:'多分区背光 | MEMC动态补偿 | 杜比视界',
                            num:'2599元起',
                        },
                        {
                            imgsrc:'./img/5.webp',
                            name:'九号卡丁车Pro兰博基尼汽车定制版',
                            introduce:'九号卡丁车Pro兰博基尼汽车定制版',
                            num:'9999元起',
                        },
                        {
                            imgsrc:'./img/6.webp',
                            name:'Redmi G 2021 R7/RTX3050Ti/16G/51',
                            introduce:'有光追，才是高性能游戏本',
                            num:'6299元起',
                        },
                        {
                            imgsrc:'./img/7.webp',
                            name:'米家电动剃须刀S500',
                            introduce:'3刀头360°浮动丨超长续航',
                            num:'169元起',
                        },
                        {
                            imgsrc:'./img/8.webp',
                            name:'Xiaomi Watch S1',
                            introduce:'蓝宝石玻璃镜面 | 不锈钢中框 | 1.43”AMOLED大屏幕',
                            num:'1099元起',
                        },
                    ]
                        }
                    },
                    props:['sonname'],
                    methods:{
                        getData(i){
                            let newdata = this.sonname
                            newdata = this.list[i].name
                            this.$emit('addname',newdata)
                            
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>